import { init } from 'snabbdom/init'
import { h } from 'snabbdom/h'
import { eventListenersModule } from 'snabbdom/modules/eventlisteners'

const patch = init([eventListenersModule])

const moduleVnode1 = h('div.module1', [
  ,,
  h('div.child1', '子项1'),
  ,
])
const moduleVnode2 = h('div.module1', [
  ,
  h('div.child1', '子项2')
])
const toggleModule = function(event, vnode) {
  const moduleNum = vnode.data.data.model
  const newVnode = moduleNum === 1 ? moduleVnode1 : moduleVnode2

  patch(currentModuleVnode, newVnode)
  currentModuleVnode = newVnode
}
let currentModuleVnode = moduleVnode1

const boxVnode = h('div#apps.box', [
  h('div.btn', [
    h(
      'button',
      {
        data: {
          model: 1
        },
        on: {
          click: toggleModule
        }
      },
      '模块1'
    ),
    h(
      'button',
      {
        data: {
          model: 2
        },
        on: {
          click: toggleModule
        }
      },
      '模块2'
    )
  ]),
  currentModuleVnode
])
const appDom = document.querySelector('#app')

patch(appDom, boxVnode)

// 在构建一个新的 vnode 替换老的 vnode
// const newVnode = h('div#newapp.snabbdom', 'hello snabbdom')
// patch(oldVnode, newVnode)
